<template>
  <div class="hello">
    <div>
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
<van-tabs v-model="active"   color="#fcb251" :sticky="true" title-inactive-color="#717171"
>
  <van-tab title="取样实拍"></van-tab>
  <van-tab title="检测报告"></van-tab>
  <van-tab title=""></van-tab>
</van-tabs>

<van-popup v-model="all" style="height: 40%;"  position="bottom">
			<van-picker :columns="columns" :show-toolbar="true" title="请选择批次" value-key="number"
				@cancel="batchClose"  @confirm="batchBtnOk"
			/>
		</van-popup>

  </div>
</template>

<script>
import Vue from 'vue';
import { Loading,Tab, Tabs,Picker,Popup } from 'vant';

Vue.use(Loading);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Picker);
Vue.use(Popup);
export default {
  name: 'HelloWorld',
  data () {
    return {
      loading:true,
      active:0,
      columns: [
      	{values:[{number:1,name:"aaa"}]},{values:[]}
      ],
      all:true,
    }
  },
  methods: {
    //选择批次
      choiceBatch(item){
    	  console.log(item)
      },
      batchClose(){
        this.all = false
      },

    //批次弹窗确定
    batchBtnOk(e){
      console.log(e)
    },
  },
  created () {

  },
  components: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
